<template>
  <div>
    <el-row :gutter="32">
      <el-col :lg="12">
        <div class="ml10">
          <div class=" text-green  mt30 ml30  " style="font-weight: 700;font-size: 40px ;"> {{dept}}</div>
        </div>
        <div class="   ml20 mt20 classflex-left ">
          <div class="ml10">
            <el-avatar :size="size" :src="circleUrl"></el-avatar>
          </div>
          <div class="ml30">
            <div class="text-size-20 text-black   ">你好，{{nickName}}</div>
            <div class=" text-size-15 text-gray mt10  ">你当前的身份是：{{identity}}></div>
          </div>


        </div>
        <div class="   ml30 mt40">
          <el-alert class="ml30 mt40" :title="statetotal" type="warning">
          </el-alert>

        </div>


        <div class="ml30 mt20">
          <div class="text-size-20 text-black   "><i class="el-icon-chat-line-square mr10"></i>学员数据概览</div>


        </div>
        <div class="content ml20">
          <!-- <el-card class="item" v-for="item in list" :key="item"> -->
          <div class="item" @click="tostudent(0)">

            <div class="text-gray text-size-14 hovertext">在读学员人数</div>


            <div class=" text-black text-size-20 mt20 ">{{studentCount.now_student_num}}</div>

          </div>
          <div class="item" @click="tostudent(1)">

            <div class="text-gray text-size-14 hovertext">历史学员人数</div>


            <div class=" text-black text-size-20 mt20 ">{{studentCount.older_student_num}}</div>

          </div>
          <div class="item" @click="tostudent(2)">

            <div class="text-gray text-size-14 hovertext">潜在学员人数</div>


            <div class=" text-black text-size-20 mt20 ">{{studentCount.potential_student_num}}</div>

          </div>
          <div class="item" @click="tostudent(3)">

            <div class="text-gray text-size-14 hovertext">即将到期学员</div>


            <div class=" text-black text-size-20 mt20 ">{{studentCount.num}}</div>

          </div>
          <div class="item" @click="tostudent(4)">

            <div class="text-gray text-size-14 hovertext">欠费代缴学员</div>


            <div class=" text-black text-size-20 mt20 ">{{studentCount.cost_num}}</div>


          </div>
          <div class="item" @click="tostudent(5)">

            <div class="text-gray text-size-14 hovertext">本月生日学员</div>


            <div class=" text-black text-size-20 mt20 ">{{studentCount.birthday_num}}</div>

          </div>

          <!-- </el-card> -->
        </div>
        <div class=" classflex-space-between ml30">
          <div class="text-size-20 text-black   "><i class="el-icon-edit mr10"></i>本月上课安排</div>
          <div class="      mr20">
            <el-link class="text-size-15" type="success" @click="get_jecoco_report">查看全部课表></el-link>
          </div>


        </div>
        <div class="ml20">

          <el-calendar v-model="calendardata">
            <template slot="dateCell" slot-scope="{date, data}">
              <!-- {{date}} -->
              <!-- {{data}} -->

              <br />
              <div class="text-black classflex-center">
                {{ data.day.split('-').slice(2).join('-') }}
              </div>

              <div v-if=" my_date2(data.day)" class=" text-orange classflex-center mt10">


                {{my_date(data.day)}}
              </div>
              <div v-if="!my_date2(data.day)" class="text-green classflex-center mt10">


                {{my_date(data.day)}}
              </div>


            </template>
          </el-calendar>




          <div class="grid-content bg-purple-dark    text-size-23-w700 ml10 "> {{result_numberall}}
            {{formatDate2(calendardata)}} {{week_day}}
          </div>
        </div>
        <!-- <div class="content ml20">

          <el-empty :image-size="300" v-if="schedulingList.length==0"></el-empty>
          <el-card class="itemleftnow" v-else v-for="item in schedulingList" :key="item.id">
            <div @click="tonowcourse(item)">
              <div class="classflex-space-between">
                <div>
                  <div class="classflex-left">
                    <div class=" text-size-30 text-lv "><i
                        class="el-icon-alarm-clock "></i>{{item.classStart}}-{{item.classStart}}</div>
                    <div class=" text-size-16 text-gray ml20 ">{{item.classHours}}课时</div>
                  </div>

                  <div class=" text-size-14 text-gray  mt10 hovertext mt20"><i
                      class="el-icon-s-fold mr10"></i>班级：{{item.className||"默认班级"}}/{{item.classCourse}}
                  </div>
                  <div class=" text-size-14 text-gray mt10 hovertext mt20"><i
                      class="el-icon-user mr10"></i>教师：{{item.classTeacher}} ·学员：{{item.remark5||"0" }}人
                  </div>
                </div>


              </div>
            </div>
          </el-card>
        </div> -->
        <div class="  ml20 mt20">

          <el-empty :image-size="300" v-if="schedulingList.length==0"></el-empty>
          <el-card class="itemright" v-else v-for="item in schedulingList" :key="item.id">
            <div @click="tonowcourse(item)">
              <div class="classflex-space-between">
                <div>
                  <div class="classflex-left">
                    <div class=" text-size-30 text-lv "><i
                        class="el-icon-alarm-clock mr10 "></i>{{item.classStart}}-{{item.classFinish}}</div>
                    <div class=" text-size-16 text-gray ml20 ">{{item.classHours}}课时</div>
                  </div>

                  <div class=" text-size-14 text-gray  mt10 hovertext mt20"><i
                      class="el-icon-s-fold mr10"></i>班级：{{item.className||"默认班级"}}/{{item.classCourse}}
                  </div>
                  <div class=" text-size-14 text-gray mt10 hovertext mt20"><i
                      class="el-icon-user mr10"></i>教师：{{item.classTeacher}} ·学员：{{item.classStudent}}人
                  </div>
                </div>

                <div class="ml30">
                  <div v-if="item.state=='未开始'" class="ellipse  text-gray">
                    <div class="classflex-left">
                      <div class="scheduling_unstart mr10"></div>
                      {{item.state||"未知状态" }}
                    </div>

                  </div>
                  <div v-if="item.state=='进行中'" class="ellipse  text-info ">
                    <div class="classflex-left">
                      <div class="scheduling_doing mr10"></div>
                      {{item.state||"未知状态" }}
                    </div>
                  </div>
                  <div v-if="item.state=='待结算'" class="ellipse text-orange">
                    <div class="classflex-left">
                      <div class="scheduling_end mr10"></div>
                      {{item.state||"未知状态" }}
                    </div>
                  </div>
                  <div v-if="item.state=='已结算'" class="ellipse text-green">
                    <div class="classflex-left">
                      <div class="scheduling_finish mr10"></div>

                      {{item.state||"未知状态" }}
                    </div>
                  </div>

                </div>
              </div>
            </div>
          </el-card>
        </div>




      </el-col>



      <el-col :lg="12">

        <div class="xian">
          <div class="mr20">
            <div class="   ml30 mt90">
              <el-alert class="ml30 mt40" title="已开通vip，有效期至2025年2月2日，客服电话：18681010566（微信同号）" type="warning">
              </el-alert>

            </div>


            <div class="ml30 mt20">
              <div class="text-size-20 text-black   "><i class="el-icon-thumb mr10"></i>快捷入口</div>


            </div>

            <div class="content ml20">
              <el-card class="itemright" v-for="item in listright" :key="item.id">
                <div @click="tonow(item)" class="classflex-center" style="flex-direction: column;">
                  <div class="  image-container">

                    <img :src="item.iconPlacement" alt="logo">

                  </div>
                  <!-- <el-avatar :size="size" :src="item.circleUrl"></el-avatar> -->
                  <div class=" text-size-15 mt20  classflex-center">{{item.name}}</div>
                </div>



              </el-card>
            </div>

            <div class="ml30 mt70">
              <div class="text-size-20 text-black   "><i class="el-icon-ship mr10"></i>多端协同，畅享便捷管理</div>



            </div>
            <div class="contentbottom ml20">
              <el-card class="itemrightboot" v-for="item in listrightbootm " :key="item.id"
                :body-style="{ padding: '0px' }">
                <div class="  image-container2">

                  <img :src="item.src" alt="logo">

                </div>
                <!-- <el-image class="classimage" :src="item.src"></el-image> -->
                <div class=" text-black text-size-15 mt10 ml20">{{item.name}}</div>
                <div class=" text-gray text-size-15 ml20 ">{{item.introduce}}</div>

              </el-card>
            </div>
          </div>
        </div>



      </el-col>

    </el-row>
    <add-student-drawer class="" ref="StudentDrawer" @success="success">

    </add-student-drawer>
    <add-course-drawer class="" ref="CourseDrawer">

    </add-course-drawer>
    <add-order-drawer class="" ref="OrderDrawer" @success="success">

    </add-order-drawer>

    <add-scheduling-drawer class="" ref="SchedulingDrawer">

    </add-scheduling-drawer>
    <become-student-drawer class="" ref="BecomeStudentDrawer">

    </become-student-drawer>

    <arrears-student-drawer class="" ref="ArrearsStudentDrawer">

    </arrears-student-drawer>
    <birthday-student-drawer class="" ref="BirthdayStudentDrawer">

    </birthday-student-drawer>

    <school-timetable-drawer class="" ref="SchoolTimetableDrawer" @detel="getSchedulingList">

    </school-timetable-drawer>

  </div>
</template>

<script>
  import logo1 from '@/assets/logo/z1.png'
  import logo2 from '@/assets/logo/z2.png'
  import logo3 from '@/assets/logo/z3.png'
  import logo4 from '@/assets/logo/z4.png'
  import logo5 from '@/assets/logo/z5.png'
  import logo6 from '@/assets/logo/z6.png'
  import logo7 from '@/assets/logo/z7.png'
  import logo8 from '@/assets/logo/z8.png'

  import logo9 from '@/assets/logo/1.png'
  import logo10 from '@/assets/logo/2.png'
  import logo11 from '@/assets/logo/3.png'
  import logo12 from '@/assets/logo/4.png'
  import SchoolTimetableDrawer from '@/components/SchoolTimetableDrawer'
  import {

    getCount,
    listStudent,
    getStudent,
    delStudent,
    addStudent,
    updateStudent
  } from "@/api/student/student";
  import AddStudentDrawer from '@/components/AddStudentDrawer'
  import AddCourseDrawer from '@/components/AddCourseDrawer'
  import AddOrderDrawer from '@/components/AddOrderDrawer'
  import AddSchedulingDrawer from '@/components/AddSchedulingDrawer'
  import BecomeStudentDrawer from '@/components/BecomeStudentDrawer'
  import ArrearsStudentDrawer from '@/components/ArrearsStudentDrawer'
  import BirthdayStudentDrawer from '@/components/BirthdayStudentDrawer'
  import {
    calculateDaysAfter,
    calculateDaysBetween
  } from "@/utils/ruoyi";
  import {
    schedulingtablelist,
    listScheduling,
    getScheduling,
    delScheduling,
    addScheduling,
    updateScheduling
  } from "@/api/scheduling/scheduling";
  export default {
    name: 'Index',

    components: {
      AddStudentDrawer,
      AddCourseDrawer,
      AddOrderDrawer,
      AddSchedulingDrawer,
      BecomeStudentDrawer,
      ArrearsStudentDrawer,
      BirthdayStudentDrawer,
      SchoolTimetableDrawer
    },
    data() {
      return {
        statetotal: "",
        dept: "",
        identity: "",
        nickName: "",
        result_numberall: "",
        week_day: "",
        studentCount: {},
        calendardata: new Date(),
        url: "",
        size: "large",
        title: "",
        open_student: false,
        circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
        queryParamsStudent: {},
        queryParamsScheduling: {
          pageNum: 1,
          pageSize: 10,
          deptId: null,
          className: null,
          classCourse: null,
          classCapacity: null,
          classAskforleave: null,
          classNoyet: null,
          classWorkOut: null,
          classCirculate: null,
          classStart: null,
          classFinish: null,
          classHours: null,
          classTeacher: null,
          classAttendant: null,
          classRoom: null,
          classStudent: null,
          remark2: null,
          remark3: null,
          remark4: null,
          remark5: null,
          remark6: null,
          remark7: null,
          remark8: null,
          remark9: null,
          remark10: null
        },
        // 课程表表格数据
        schedulingList: [],
        getschedulingtablelist: [],
        queryParamsSchedulingtablelist: {
          year: null,
          month: null,

        },

        listright: [{
          id: 0,
          name: "新增学员",
          iconPlacement: logo1,
          color: "red"
        }, {
          id: 1,
          name: "创建课程",
          iconPlacement: logo2,
          color: "gray"
        }, {
          id: 2,
          name: "报名续课",
          iconPlacement: logo3,
          color: "burlywood"
        }, {
          id: 3,
          name: "新增排课",
          iconPlacement: logo4,
          color: "aquamarine"
        }, {
          id: 4,
          name: "调整排课",
          iconPlacement: logo5,
          color: "purple"
        }, {
          id: 5,
          name: "新增员工",
          iconPlacement: logo6,
          color: "orange"
        }, {
          id: 6,
          name: "家校互动",
          iconPlacement: logo7,
          color: "FF00FF"
        }, {
          id: 7,
          name: "课堂点评",
          iconPlacement: logo8,

          color: '0099FF',
        }],
        listrightbootm: [{
          id: 0,
          name: "电脑管理端",
          introduce: "清爽大屏，使用简单流畅！",
          src: logo9
        }, {
          id: 1,
          name: "竹石Link优课App",
          introduce: "移动办公，随身教务管家！",
          src: logo10
        }, {
          id: 2,
          name: "绑定公众号",
          introduce: "智能提醒，提升品牌形象",
          src: logo11
        }, {
          id: 3,
          name: "竹石Link优课助手小程序",
          introduce: "自助协作，贴心家校互动！",
          src: logo12
        }]
      }
    },
    watch: {
      'calendardata': {
        handler() {
          this.startnow();
          console.log("变化了:" + this.calendardata);
          // 获取当前的年份
          var year = this.calendardata.getFullYear();

          // 获取当前的月份（注意月份从0开始计数）
          var month = this.calendardata.getMonth() + 1; // 需要加上1才能得到正确的月份值
          this.queryParamsSchedulingtablelist.year = year;
          this.queryParamsSchedulingtablelist.month = month;
          //获取课程表列表
          this.getSchedulingtablelistCount();

          this.getSchedulingList();
        }
      },
    },

    created() {
      // 可以使用JavaScript中的Date对象来获取当前的年份和月份。

      // 创建一个新的日期对象
      var date = new Date();

      // 获取当前的年份
      var year = date.getFullYear();

      // 获取当前的月份（注意月份从0开始计数）
      var month = date.getMonth() + 1; // 需要加上1才能得到正确的月份值
      this.queryParamsSchedulingtablelist.year = year;
      this.queryParamsSchedulingtablelist.month = month;
      //获取课程表列表
      this.getSchedulingtablelistCount();
      this.getSchedulingListstate();
      this.getCount();

      this.startnow();
      this.getSchedulingList();

      this.nickName = this.$store.state.user.nickname;

      if (this.$store.state.user.role.length > 0) {
        this.identity = this.$store.state.user.role[0].roleName;
      } else {
        this.identity = "暂无"
      }
      this.dept = this.$store.state.user.dept;

    },
    methods: {
      success(){
          this.getCount();
      },
      tonowcourse(item) {
        console.log("iD:" + item.id);

        this.$refs.SchoolTimetableDrawer.openschooltimetable(item.id);
      },
      getSchedulingtablelistCount() {

        this.queryParamsSchedulingtablelist.deptId = this.$store.state.user.deptId;
        schedulingtablelist(this.queryParamsSchedulingtablelist).then(response => {
          // console.log(response);
          if (response.code == 200) {
            this.getschedulingtablelist = response.rows;
          }



        });
      },


      my_date(v) {


        let len = this.getschedulingtablelist.length
        var res = ""
        for (let i = 0; i < len; i++) {
          if (this.getschedulingtablelist[i].date == v) {
            var scheduingMessage = {

            }
            var res = this.getschedulingtablelist[i].content;
            var haveNoSettlement = this.getschedulingtablelist[i].haveNoSettlement;

            if (res == 0) {
              res = ""
            } else {
              res = res + "节课"
            }
            scheduingMessage.res = res
            scheduingMessage.haveNoSettlement = haveNoSettlement
            break
          }
        }
        return res
      },
      my_date2(v) {


        let len = this.getschedulingtablelist.length

        for (let i = 0; i < len; i++) {
          if (this.getschedulingtablelist[i].date == v) {

            // var res = this.getschedulingtablelist[i].content;
            var haveNoSettlement = this.getschedulingtablelist[i].haveNoSettlement;



            break
          }
        }
        return haveNoSettlement
      },
      startnow() {
        var result_number = this.calculateDaysBetween(this.formatDate(this.calendardata), this.formatDate(new Date()));
        // console.log(result_number);
        if (result_number == 0) {
          this.result_numberall = "今天"
        } else {
          if (this.formatDate(this.calendardata) > this.formatDate(new Date())) {
            result_number = result_number + "天后";
          } else {
            // console.log("前");
            result_number = result_number + "天前";
          }
          this.result_numberall = result_number
        }


        var WeekDay = this.getWeekDay(this.formatDate(this.calendardata));
        this.week_day = WeekDay;
        var month = this.formatDate3(this.calendardata);
        this.now_month = month;
      },

      getWeekDay(date) {
        if (typeof date === 'string') {
          date = date.replace(/-/g, '/')
        }

        const weekDay = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
        const myDate = new Date(Date.parse(date));
        return weekDay[myDate.getDay()];
      },

      formatDate(date) {
        const year = date.getFullYear();
        const month = ('0' + (date.getMonth() + 1)).slice(-2);
        const day = ('0' + date.getDate()).slice(-2);

        return `${year}-${month}-${day} `;
      },
      formatDate2(date) {
        const year = date.getFullYear();
        const month = ('0' + (date.getMonth() + 1)).slice(-2);
        const day = ('0' + date.getDate()).slice(-2);

        return `${year}年${month}月${day}日 `;
      },
      formatDate3(date) {
        const year = date.getFullYear();
        const month = ('0' + (date.getMonth() + 1)).slice(-2);
        const day = ('0' + date.getDate()).slice(-2);

        return `${year}年${month}月  `;
      },
      getSchedulingList() {
        this.loading = true;
        this.queryParamsScheduling.state = "";
        this.queryParamsScheduling.studyDate = this.formatDate(this.calendardata);
        this.queryParamsScheduling.deptId = this.$store.state.user.deptId;
        listScheduling(this.queryParamsScheduling).then(response => {
          this.schedulingList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      getSchedulingListstate() {

        this.queryParamsScheduling.state = "待结算";
        this.queryParamsScheduling.deptId = this.$store.state.user.deptId;
        listScheduling(this.queryParamsScheduling).then(response => {
          this.schedulingList = response.rows;
          this.statetotal = response.total + '节课待结算,请尽快处理'


        });
      },
      getCount() {

        this.queryParamsStudent.deptId = this.$store.state.user.deptId;
        getCount(this.queryParamsStudent).then(response => {

          if (response.code == 200) {
            this.studentCount = response.data;
          }



        });
      },
      handleSetLineChartData(type) {

      },
      tostudent(e) {
        // console.log(e);
        var url = "";
        switch (e) {
          case 0:
            url = "/student/student";
            this.$router.push({
              path: url,
              query: {
                type: "在读学员",

              }
            })



            break;
          case 1:
            url = "/student/student";
            this.$router.push({
              path: url,
              query: {
                type: "历史学员",

              }
            })


            break;
          case 2:
            url = "/student/student";
            this.$router.push({
              path: url,
              query: {
                type: "潜在学员",

              }
            })


            break;
          case 3:
            console.log("即将到期学员")



            this.$refs.BecomeStudentDrawer.openbecomestudentlist();

            break;
          case 4:
            console.log("欠费待缴学员")
            this.$refs.ArrearsStudentDrawer.openarrearsstudentlist();


            break;
          case 5:
            console.log("本月生日学员")


            this.$refs.BirthdayStudentDrawer.openbirthdaystudent();
            break;



          default:
            url = "";
        }





      },

      tonow(e) {
        console.log(e);
        var url = "";
        switch (e.id) {
          case 0:
            // url = "/student/student";
            // this.open_student = true;

            this.$refs.StudentDrawer.open();

            break;
          case 1:
            // url = "/course/course";
            this.$refs.CourseDrawer.open();

            break;
          case 2:
            // url = "/order/order";
            this.$refs.OrderDrawer.open();

            break;
          case 3:
            this.$refs.SchedulingDrawer.open();


            break;
          case 4:
            url = "/scheduling/changescheduling";


            break;
          case 5:
            url = "/institution/user";
            break;
          case 6:
            url = "/order/order";
            break;
          case 7:
            url = "/order/order";
            break;
          default:
            url = "";
        }
        this.url = url;
        this.$router.push({
          path: this.url,
          // query:{
          //   id:row.id,
          //   form:JSON.stringify(this.form)
          // }
        })

      },
      get_jecoco_report() {
        console.log("1111");
        this.$router.push({
          path: '/scheduling/scheduling',
          // query:{
          //   id:row.id,
          //   form:JSON.stringify(this.form)
          // }
        })

      }
    }
  }
</script>

<style lang="scss" scoped>
  .content {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: 20px;
    // background-color: skyblue;
  }

  .classimage {
    // height: 120px;
  }

  .contentbottom {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: 20px;
    // background-color: skyblue;
  }

  .classimage {
    height: 200px;
    width: 100%;
  }

  .item {
    flex: 0 0 calc((100% - 10px)/3);
    height: 100px;
    // background-color: pink;
    /* 间隙为5px */
    margin: 0 5px 5px 0;
  }

  .itemright {
    flex: 0 0 calc((100% - 20px)/4);
    // height: 120px;
    // background-color: pink;
    /* 间隙为5px */
    margin: 0 5px 5px 0;
  }

  .itemrightboot {
    flex: 0 0 calc((100% - 20px)/2);
    height: 230px;
    // background-color: pink;
    /* 间隙为5px */
    margin: 0 5px 5px 0;
  }

  .item:nth-child(3n) {
    /* 去除第3n个的margin-right */
    margin-right: 0;
  }

  .xian {
    border-left: 2px solid #f3f6ff;
  }

  .circle {
    width: 50px;
    /* 设置宽度 */
    height: 50px;
    /* 设置高度 */
    // background-color: aqua;
    border-radius: 50%;
    /* 将边界角变成半径相等的圆形 */
  }

  .background-color-red {
    background-color: red;
  }

  .background-color-gray {
    background-color: gray;
  }

  .background-color-burlywood {
    background-color: burlywood;
  }

  .background-color-aquamarine {
    background-color: aquamarine;
  }

  .background-color-purple {
    background-color: purple;
  }

  .background-color-orange {
    background-color: orange;
  }

  .background-color-FF00FF {
    background-color: #FF00FF;
  }

  .background-color-0099FF {
    background-color: #0099FF;
  }

  .content {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 20px;
    // background-color: skyblue;
  }

  .itemleftnow {
    width: 100%;
    // flex: 0 0 calc((100% - 20px)/4);
    // height: 120px;
    // background-color: pink;
    /* 间隙为5px */
    margin: 0 5px 5px 0;
  }

  .image-container {
    // display: flex;
    // flex-direction: column;
    // align-items: center;
    width: 60px;
    /* 设置容器宽度 */
  }

  .image-container img {
    max-width: 100%;
    /* 最大宽度为容器宽度 */
    height: auto;
    /* 高度自适应 */
  }

  .image-container2 {
    // display: flex;
    // flex-direction: column;
    // align-items: center;
    width: 100%;
    padding: 5px;
    // height: 200px;
    /* 设置容器宽度 */
  }

  .image-container2 img {
    max-width: 100%;
    /* 最大宽度为容器宽度 */
    height: auto;
    /* 高度自适应 */
  }

  .itemright:hover {
    /* 盒子向上移动 */
    transform: translateY(-5px);
    /* 背景 */
    box-shadow: 0 20px 80px rgba(48, 49, 51, 0.15);
  }
</style>
